<template>
  <div id="welCom">
    <div class="top">
      <div class="infoBox">
        <div class="workerInfo">
          <div class="img">
            <el-avatar :src="arr.headimgurl?arr.headimgurl:avtarUrl" style="width: 65px; height:65px;"></el-avatar>
          </div>
          <div class="post">
            <i class="el-icon-setting"></i>
            <h3>{{arr.nickname}}</h3>
            <span>web开发工程师</span>
          </div>
        </div>
        <div class="timeInfo">
          <el-calendar v-model="date" height="100%">
          </el-calendar>
        </div>
      </div>
      <div class="workBox">
        <div class="workNotice">
          <div class="report">
            <div class="hello">
              早上好
            </div>
            <div class="weather">
              南京天气
            </div>
          </div>
          <div class="workSpeed">
            通知公告
          </div>
        </div>
        <div class="task">
          <div class="task1" ref="pie">
            饼状图
          </div>
          <div class="task2">
            <h4>本月工作任务完成情况</h4>
            <div class="tips">
              <div v-for="(item,index) in taskData" :key="index" class="tip">
                <span> {{item.value}}</span>
                <span class="tipName">{{item.name}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="line" ref="lines">

      </div>
      <div class="calssPie" ref="calssPie">

      </div>
    </div>

  </div>
</template>

<script>
  import * as echarts from "echarts" //引入echarts
  import {
    getTaskDataApi,
    getLineDataApi,
    getExpectApi

  } from "@/api"
  export default {
    created() {
      this.arr = JSON.parse(localStorage.getItem("userInfo"))
      // console.log(this.arr)
    },
    data() {
      return {
        date: new Date(),
        workDataDetail: [],
        taskData: [],
        arr: [],
        avtarUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      }
    },
    mounted() {
      // 建议放在$nextTick
      this.$nextTick(() => {
        let myCharts = echarts.init(this.$refs.pie)
        let option = {
          title: {
            text: "任务概况",
            fontSize: "minin"
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            right: 'right',
            top: "bottom"
          },
          series: [{
            name: '任务情况',
            type: 'pie',
            center: ["42%", "50%"],
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'


            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false,
            },
            data: []
          }]
        };
        // 发送异步请求
        getTaskDataApi()
          .then(res => {
            let data = res.data.data
            this.taskData = data
            option.series[0].data = data
            myCharts.setOption(option)
          })

        // line
        let lineCharts = echarts.init(this.$refs.lines)
        let lineOption = {
          xAxis: {
            type: 'category',
            show: false,
            data: []
          },
          yAxis: {
            show: false
          },
          label: {
            show: true,
            formatter: "{b}:{c}%"
          },
          series: [{
            name: "学习进度",
            data: [],
            type: 'line',
            smooth: 1
          }]
        };
        getLineDataApi()
          .then(res => {
            let data = res.data.data
            data.forEach(item => {
              lineOption.series[0].data.push(item.rate)
              lineOption.xAxis.data.push(item.name)
            });
            lineCharts.setOption(lineOption)
          })
        let calssCharts = echarts.init(this.$refs.calssPie)
        let calssOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            right: 'right',
            top: "bottom"
          },
          series: [{
            name: '期待课程情况',
            type: 'pie',
            center: ["42%", "50%"],
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outer', //可以是inner center outer设置提示位置
              formatter: "{b}:{d}%", //\n\n很关键 能够让文字显示在牵引线上方


            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            color: ['red', 'deepskyblue', 'hotpink'],
            labelLine: {
              show: true,
              length: 10, //牵引线长度
              length2: 10,
              lineStyle: { //牵引线颜色
                color: '#808080'
              },
            },
            data: []
          }]
        };
        getExpectApi()
          .then(res => {
            let data = res.data.data
            calssOption.series[0].data = data.map(item => {
              return {
                value: item.rate,
                name: item.title
              }
            })
            calssCharts.setOption(calssOption)
          })

      })
    }
  }
</script>
<style scoped lang="less">
 & /deep/ .el-table td .el-table th{
   padding: 0;  

 }
 & /deep/ .el-table td {
   height: 30px;
 }
  & /deep/ .el-calendar-table .el-calendar-day {
    height: 28px;
   
  }
  & /deep/ .el-calendar__title{
    font: 10px/20px "";
  }
  & /deep/ .el-button--plain{
    width: 54px;
    margin-left: 2px;
  }
  & /deep/ .el-calendar-table thead th {
    padding-top: 0;
    padding-bottom: 0;
  }
 & /deep/ .calendar .el-calendar__header {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  & /deep/ .el-calendar__header{
    padding: 12px 0;
  }
  #welCom {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .top {
      margin-top: 15px;
      display: flex;
      height: 65%;
      border: 5px solid #d5d9e2;

      .infoBox {
        width: 30%;
        display: flex;
        flex-direction: column;
        border-right: 5px solid #d5d9e2;

        .workerInfo {
          justify-content: space-around;
          height: 30%;
          display: flex;
          align-items: center;
          border-bottom: 5px solid #d5d9e2;
          position: relative;

          .post {
            display: flex;
            flex-direction: column;

            .el-icon-setting {
              position: absolute;
              right: 5px;
              top: 5px;
            }


            h3 {
              text-align: center;
              margin-bottom: 5px;
            }
          }
        }

        .timeInfo {
          height:70%;

          .el-calendar {
            height: 100%;

            & /deep/.el-calendar__header {
              padding-top: 5px;
              padding-bottom: 5px;
            }


            & /deep/ .el-calendar__body {
              padding-top: 10px;
              padding-bottom: 0;

              & /deep/ .el-calendar-table {
                & /deep/ .el-calendar-table .el-calendar-day {
                  height: 0 !important;
                }

                thead {
                  th {
                    padding-top: 0;
                    padding-bottom: 0;
                  }
                }
              }
            }
          }
        }
      }

      .workBox {
        width: 70%;
        display: flex;
        flex-direction: column;

        .workNotice {
          display: flex;
          height: 55%;
          border-bottom: 5px solid #d5d9e2;

          .report {
            width: 45%;
            border-right: 5px solid #d5d9e2;

            .hello {
              height: 50%;
              border-bottom: 5px solid #d5d9e2;
            }

            .weather {
              height: 50%;
            }
          }

          .workSpeed {
            width: 55%;
            height: 100%;
          }
        }

        .task {
          height: 45%;
          display: flex;

          .task1 {
            width: 48%;
            border-right: 5px solid #d5d9e2;
          }

          .task2 {
            width: 52%;
            display: flex;
            flex-direction: column;

            h4 {
              text-align: center;
              margin: 15px 0;
            }

            .tips {
              display: flex;
              justify-content: space-around;

              .tip {
                margin: 15px 0;
                display: flex;
                flex-direction: column;
                text-align: center;

                .tipName {
                  margin: 15px 0;
                }

              }
            }
          }
        }

        .workSpeed {
          height: 45%;
        }
      }
    }

    .bottom {
      height: 35%;
      border: 5px solid #d5d9e2;
      border-top: 0;
      display: flex;

      .line {
        width: 50%;
        height: 100%;
      }

      .calssPie {
        width: 50%;
      }
    }
  }
</style>